<template>
    <div class="page-main" v-scrollbar v-ploading="loading" icon="20">
        <div style="display: flex;flex-wrap: wrap;">
          <template v-for="(items, indexs) in 27">
            <div style="display:flex;flex-direction: column; align-items: center;">
              <div style="width: 2.5rem;height: 2.5rem;" v-ploading="true" :icon="indexs + 1"></div>
            </div>
          </template>
        </div>
    </div>
</template>
<script setup name="loading">
import { message } from 'ant-design-vue';
import { onMounted,ref,computed,watch,getCurrentInstance,onBeforeMount,onActivated,onDeactivated } from "vue";
const { proxy } = getCurrentInstance();
const loading = ref(true)
onActivated(() => {
  console.log("home-onActivated")
  loading.value=true
  setTimeout(()=>{
    loading.value=false
  },300)
})
onDeactivated(()=>{
  console.log("home-onDeactivated")
})
</script>